/**
* @name: UserView
* @author: D
* @date: 2022/8/21 17:44
* @description：UserView
* @update: 2022/8/21 17:44
*/
<template>
  <div>
    <div class="header">用户管理</div>
    <div class="table">
      <el-table
          @selection-change="handleSelectionChange"
          ref="multipleTable"
          :data="searchList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            label="姓名"
            prop="name"
            width="100">
        </el-table-column>
        <el-table-column
            label="年龄"
            prop="age"
            width="100">
        </el-table-column>
        <el-table-column
            label="性别"
            prop="sex"
            width="100">
        </el-table-column>
        <el-table-column
            label="联系电话"
            prop="phone"
            width="200">
        </el-table-column>
        <el-table-column
            label="详细地址"
            prop="address">
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="danger" class="delete" @click="toggleSelection()">批量删除</el-button>
      <el-button type="primary" @click="addUser">增加 +</el-button>
    </div>
    <!--弹窗-->
    <el-dialog
        title="修改用户信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-position="left">
        <el-form-item label="姓名">
          <el-input v-model="userMessage.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="userMessage.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="userMessage.sex"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="userMessage.phone"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="userMessage.address"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="updateUserMessage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {nanoid} from 'nanoid';
export default {
  name: "UserView",
  data() {
    return {
      tableData: [{
        id: '1',
        name: '小明',
        age: '18',
        sex: '男',
        phone: '1234567890',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '2',
        name: '小红',
        age: '18',
        sex: '男',
        phone: '1234567890',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '3',
        name: '小张',
        age: '18',
        sex: '男',
        phone: '1234567890',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '4',
        name: '小非',
        age: '18',
        sex: '男',
        phone: '1234567890',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: '5',
        name: '小白',
        age: '18',
        sex: '男',
        phone: '1234567890',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      ],//数据源
      search: '',
      dialogVisible: false,//弹出框，
      userMessage: {},//用户的信息,
      updateId: '',
      multipleSelection:''
    }
  },
  created() {
    const list = JSON.parse(localStorage.getItem("data") || this.tableData); //从localStorage中获取之前发布过的数据
    this.tableData = list; //把获取到的数据赋值给this.tableData

  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)  //打印选中的行集合
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogVisible = true
      console.log(index, row);
      const Id = row.id
      const userInfo = this.tableData.filter((item) => {
        if (item.id === Id) {
          return item
        }
      })
      // console.log(userInfo)
      // console.log(Id, 1)
      this.userMessage = JSON.parse(JSON.stringify(userInfo[0]));
      // console.log(this.userMessage)
      this.updateId = Id
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1)
      localStorage.setItem("data", JSON.stringify(this.tableData));
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    updateUserMessage() {
      console.log(this.updateId)
      if(this.updateId!=''){
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id === this.updateId) {
            this.tableData[i].name = this.userMessage.name
            this.tableData[i].address = this.userMessage.address
            this.tableData[i].age = this.userMessage.age
            this.tableData[i].sex = this.userMessage.sex
            this.tableData[i].phone = this.userMessage.phone
          }
        }
        localStorage.setItem("data", JSON.stringify(this.tableData));
      }else{
        const userInfo = {
          id:nanoid(10),
          name:this.userMessage.name,
          age:this.userMessage.age,
          address:this.userMessage.address,
          phone: this.userMessage.phone,
          sex:this.userMessage.sex
        }
        this.tableData.push(userInfo)
        localStorage.setItem("data", JSON.stringify(this.tableData));
      }


      this.dialogVisible = false
    },
    //删除
    toggleSelection() {
      const rows = this.multipleSelection
      if (rows) {
        rows.forEach(row => {
          const newArr = this.tableData.filter((item)=>{
            if(item.id != row.id){
              return item
            }
          })
          this.tableData = newArr
          // this.$refs.multipleTable.toggleRowSelection(row);
        });
        localStorage.setItem("data", JSON.stringify(this.tableData));
      }
    },
    //增加
    addUser(){
      this.dialogVisible = true
    }
  },
  computed: {
    searchList() {
      let list = this.tableData.filter((item) => {
        return item.name.indexOf(this.search) !== -1
      })
      return list
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  height: 80px;
  background: #CCC;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.table {
  margin: 20px 80px;
  .delete{
    margin-top: 20px;
  }
}
</style>
